<template>
	<view class="p20">
		<view class="w100 checkout_wrap">

			<view>
				<view class="w100 mb20 address_box" v-for="(item, index) in address">
					<view class="w100 org_text">
						<text class="iconfont icon-dizhi fl mt18"></text>
						<view class="address_content">
							<view class="name">{{ item.name }} {{ item.phone }}</view>
							<view class="detail">{{ item.province }}{{ item.city }}{{ item.county }}{{ item.detail }}
							</view>

						</view>
						<view class="w100">
							<view class="numberControl fl">
								<text class="btn iconfont icon-jianshao" @click.stop="updateNum(item, 'cut')"></text>
								<input type="text" :value="Number(item.goods_num)" disabled="true" />
								<text class="btn iconfont icon-zengjia" @click.stop="updateNum(item,'puls')"></text>
							</view>
							<view class="check_op fr">
								<text class="iconfont icon-tianxie fr" @click="edit_address(index)"></text>
								<text class="iconfont icon-shanchu fr" @click="del_address(index)"></text>
							</view>
						</view>
					</view>
				</view>

			</view>

			<view class="w100 mb20 address_box" @click="add_address">
				<view class="w100 org_text">
					<text class="iconfont c_icon icon-liwuhuodong fl"></text>
					<view class="address_content">
						<text>添加收货地址</text>
					</view>
					<text class="iconfont c_icon icon-jiahao fr"></text>
				</view>
			</view>


			<view class="w100 mb20 goods_list">
				<view class="w100 item" v-for="(item, index) in goods">
					<image :src="item.file_path" mode=""></image>
					<view class="fr item_msg">
						<view class="title">
							{{ item.goods_name }}
						</view>
						<view class="props">
							{{ item.goods_props.toString() }} ×{{ item.goods_num }}
						</view>
						<view class="w100 price">
							<view class="b_price">
								<text class="sub">￥</text><text>{{ item.goods_price }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="w100 mb20 order_box">
					<view class="order">
						<view class="fl w100 mb20">
							<text>备注</text>
						</view>

						<view class="w100">
							<textarea class="remark" v-model="buyer_remark" placeholder="填写买家留言(50字内)"></textarea>
						</view>
					</view>
				</view>
			</view>
			<view class="w100 h200"></view>
		</view>

		<view class="btm_fix">
			<button type="default" class="w100 checkout_order" @click="checkout">提交订单</button>
		</view>


		<u-popup :show="show" :round="10" mode="bottom" @close="addresClose" :closeable="true">
			<view class="form_box">
				<view class="d_box">
					<textarea placeholder="粘贴信息自动识别" v-model="discernAddres"></textarea>
					<button class="c_addres" @click="addressData">自动识别</button>
				</view>
				<view class="t_form">
					<view class="item">
						<text>*收货人</text>
						<input type="text" placeholder="请输入收货人姓名" v-model="form.name" />
					</view>
					<view class="item">
						<text>*联系电话</text>
						<input type="text" placeholder="请输入收货人联系电话" v-model="form.phone" />
					</view>
					<view class="item">
						<text>*所在地区</text>
						<picker mode="region" @change="regionChange" :value="form.region" class="picker">
							<text class="region"
								v-if="form.region">{{form.region[0]}},{{form.region[1]}},{{form.region[2]}}</text>
							<text class="region" v-else>选择省、市、区</text>
						</picker>
					</view>
					<view class="item">
						<text>*详细地址</text>
						<input type="text" placeholder="请输入街道小区楼层" v-model="form.detail" />
					</view>
					<view class="item_btn">
						<view class="item item_bg">
							<button class="button add_button btn-normal" @click="handleSend">保存地址信息</button>
						</view>
					</view>

				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		COMMON
	} from "@/utils/commom.js"
	import {
		shop_ping_buy
	} from "@/api/checkout.js"
	import {
		check_retail_addr,
		buy_retail
	} from "@/api/retail.js"
	import {
		descern_address
	} from "@/api/address.js"


	const option = ref({}); // 立即购买URL参数
	const buyer_remark = ref(null); // 买家留言

	const address = ref([]);
	const goods = ref([]);

	const show = ref(false);
	const form = ref({});
	const index = ref(0);
	const group = ref([]);
	const discernAddres = ref('');
	const type = ref(null);
	const address_index = ref(null);

	onLoad((options) => {
		option.value = options;
	})

	onShow(() => {
		get_buy();
	})




	// 商品数量加减
	function updateNum(item, type) {
		if (type == 'puls') {
			item.goods_num++
		} else if (item.goods_num == 1) {
			item.goods_num == 1;
		} else {
			item.goods_num--
		}
	}

	// 立即购买结算信息
	function get_buy() {
		let data = {
			goods_id: option.value.goods_id,
			goods_num: option.value.goods_num,
			goods_sku_id: option.value.goods_sku_id,

			goods_sku_id: option.value.goods_sku_id,
			consignee_arr: JSON.stringify(address.value),
			order_remark: buyer_remark.value,
		}



		shop_ping_buy(data).then(res => {
			let data = res.data;
			goods.value = data.goods;
		})
	}


	//  支付
	function checkout() {
		let data = {
			consignee_arr: JSON.stringify(address.value),
			goods_sku_id: option.value.goods_sku_id,
			buyer_remark: buyer_remark.value || ''
		}

		if (!address.value.length) {
			COMMON.Toast(`请填写收货地址`);
			return false
		}

		buy_retail(data).then(res => {

			if (res.status) {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					success() {
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/order/index?type=0'
							})
						}, 1000);
					}
				});
			} else {
				COMMON.Toast(res.msg)
			}
		})
	}

	function edit_address(index) {
		type.value = 'edit'
		address_index.value = index
		show.value = true;
		let addr = address.value;
		let data = {
			name: addr[index].name,
			phone: addr[index].phone,
			detail: addr[index].detail,
			goods_num: addr[index].goods_num,
			region: [addr[index].province, addr[index].city, addr[index].county],
			code: [addr[index].province_code, addr[index].city_code, addr[index].town_code]
		}
		form.value = data
	}


	function del_address(index) {
		address.value.splice(index, 1);
	}

	function add_address() {
		show.value = true
	}


	function addresClose() {
		form.value = {};
		type.value = null;
		address_index.value = null;
		discernAddres.value = '';
		show.value = false
	}

	// 添加地址
	function handleSend() {
		check_retail_addr({
			goods_id: option.value.goods_id,
			city_code: form.value.code[1]
		}).then(res => {
			if (res.data.check_address) {
				let consignee = address.value;
				if (type.value == 'edit') {
					consignee[address_index.value] = {
						name: form.value.name,
						phone: form.value.phone,
						detail: form.value.detail,
						goods_num: 1,
						province: form.value.region[0],
						city: form.value.region[1],
						county: form.value.region[2],
						province_code: form.value.code[0],
						city_code: form.value.code[1],
						town_code: form.value.code[2],
					}
				} else {
					consignee.push({
						name: form.value.name,
						phone: form.value.phone,
						detail: form.value.detail,
						goods_num: 1,
						province: form.value.region[0],
						city: form.value.region[1],
						county: form.value.region[2],
						province_code: form.value.code[0],
						city_code: form.value.code[1],
						town_code: form.value.code[2],
					})
				}
				address.value = consignee;
				addresClose();
			} else {
				COMMON.Toast(`地址超出配送范围`);
			}




		})
	}



	function bindChange(e) {
		index.value = e.detail.value;
	}

	// 选择地区取值
	function regionChange(e) {
		let name = form.value.name,
			phone = form.value.phone,
			detail = form.value.detail;
		form.value.name = name
		form.value.phone = phone
		form.value.detail = detail
		form.value.region = e.detail.value
		form.value.code = e.detail.code
	}

	// 自动识别地址
	function addressData() {
		descern_address(discernAddres.value).then(res => {
			let data = res.data;
			form.value.region = [data.province, data.city, data.area]
			form.value.name = data.name
			form.value.phone = data.mobile
			form.value.detail = data.details
			form.value.code = [data.province_code, data.city_code, data.town_code]
		})
	}


	function validatePhoneNumber(phone) {
		// 手机号正则表达式
		const mobileRegex = /^1[3-9]\d{9}$/;
		// 固定电话正则表达式
		const landlineRegex = /^(0\d{2,3}-?\d{7,8})$/;
		let flag = false;

		if (mobileRegex.test(phone)) {
			flag = true
		} else if (landlineRegex.test(phone)) {
			flag = true
		} else {
			flag = false
		}
		return flag
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/order.scss';
	@import '@/static/css/form.scss';

	.check_op {
		text {
			padding: 20rpx;
		}
	}

	.d_box {
		width: 100%;
		margin: 20rpx auto 0;
		padding: 20rpx;
		background: #fff;
		border-radius: 10px;
		overflow: hidden;

		textarea {
			width: 70%;
			float: left;
			height: 200rpx;
			padding: 10rpx;
			box-sizing: border-box;
			font-size: 28rpx;
		}

		button {
			width: 30%;
			float: right;
			margin-top: 50rpx;
			font-size: 28rpx;
			padding: 10rpx 0;
			box-sizing: border-box;
			color: #fff;
			border-radius: 50px;
			background: linear-gradient(to right, #f9211c, #ff6335);
		}
	}

	.btm_fix .checkout_order {
		width: 100%;
	}
</style>